<template>
    <div v-if="isVisible" class="modal">
        <div class="modal-content">
            <span class="close" @click="closeModal">&times;</span>
            <div class="modal-left">
                <img :src="image" alt="Modal Image" />
            </div>
            <div class="modal-right">
                <h2>{{ title }}</h2>
                <p>{{ description }}</p>
            </div>
        </div>
    </div>
</template>  
    
<script>
export default {
    name: 'Modal',
    props: {
        isVisible: {
            type: Boolean,
            default: false,
        },
        image: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        description: {
            type: String,
            required: true,
        },
    },
    methods: {
        closeModal() {
            // this.isVisible = false;
            this.$emit('close');
        },
    },
};
</script>
<style scoped>  .modal {
      display: block;
      /* 使用v-if控制显示隐藏，所以这里设为block */
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
      z-index: 10;
  }

  .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      /* Could be more or less, depending on screen size */
      display: flex;
      border: red 1px solid;
  }

  .modal-left,
  .modal-right {
      flex: 1;
      padding: 10px;
  }

  .modal-left img {
      border: red 1px solid;
      width: 300px;
      height: 360px;
  }

  .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;


  }
</style>